<template>
  <div >
    <el-row class="index-info" :gutter="20">
      <el-col v-for="(info,index) in infoList" :span="24" :key="index">
        <div class="info-box">
          <div class="flex ai-center jc-between">
            <div class="info-title flex ai-center">
              {{info.projectName}}
            </div>
            <div class="info-value"><span>{{info.completeNum}}/{{info.stepNum}}</span></div>
          </div>
          <div class="mt10">
            <el-progress :text-inside="true" :stroke-width="24" :percentage="info.completeNum/info.stepNum*100" text-color="#ffffff" :format="(percentage)=>format(percentage,info)"></el-progress>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  // import {countHome,countSpeed} from '@/api/jiubu/home'

  export default {
    data() {
      return {
        infoList: []
      }
    },
    created(){
      countSpeed().then(res=>{
        this.infoList = res.data
      })
      // countHome().then(res=>{
      //   this.infoList = res.data
      // })
    },
    methods:{
      format(percentage,info){
        console.log(percentage,info)
        return percentage.toFixed(0) + '%'
      }
    }
  }
</script>

<style scoped lang="scss">
  .index-info{
    width: 100%;
    max-height: 360px;
    overflow-y: auto;

    .info-box {
      border: 1px solid #E4ECF1;
      padding: 10px 20px;
      margin-top: 10px;
      border-radius: 10px;
    }

    .info-title {
      font-size: 16px;
      .icon-title{
        width: 20px;
        height: 20px;
        display: block;
        margin-right: 6px;
      }
    }

    .info-value {
      font-size:16px;
      color:#696969;
      span {
        font-size: 16px;
        color:#333333;
      }
    }

    .info-img {
      width: 80px;
      height: 80px;
      display: block;
    }
  }
</style>
